<div class="body-head">
  <div class="filter">
    <mat-select
      class="form-control selected"
      [ngModel]="activeAreaID"
      (ngModelChange)="onActiveAreaIDChanged($event)"
    >
      <mat-option [value]="0">全部区域</mat-option>
      <mat-option *ngFor="let area of areaList$ | async" [value]="area.id">
        {{ area.name }}
      </mat-option>
    </mat-select>

    <mat-select
      class="form-control"
      [ngModel]="selectedTaskStatus"
      (ngModelChange)="onTaskStatusChange($event)"
      name="selectedTaskStatus"
    >
      <mat-option *ngFor="let i of taskStatusList" [value]="i">{{ i | taskStatus }}</mat-option>
    </mat-select>
    <mat-select
      class="form-control"
      [ngModel]="selectedPeriodType"
      (ngModelChange)="onPeriodTypeChanged($event)"
      name="selectedPeriodType"
    >
      <mat-option *ngFor="let i of taskPeriodList" [value]="i">{{ i | taskPeriodType }}</mat-option>
    </mat-select>
    <mat-select
      class="form-control"
      [ngModel]="selectedTaskType"
      (ngModelChange)="onTaskTypeChange($event)"
      name="selectedTaskType"
    >
      <mat-option *ngFor="let i of taskTypeList" [value]="i">{{ i | taskType }}</mat-option>
    </mat-select>
  </div>
</div>
